<template>
  <div id="nav">
    <img class="logo" src="../assets/img/LOGO.png" alt />
    <van-icon
      name="arrow-left"
      size="30px"
      style="position: absolute;left:5px;top:3px"
      @click="toMy"
    />
    <van-row class="title">
      <van-col span="12" class="mode">
        <router-link to="/phonelogin">手机验证码登录</router-link>
      </van-col>
      <van-col span="12" class="mode">
        <router-link to="/pwdlogin">账号密码登录</router-link>
      </van-col>
    </van-row>
    <router-view></router-view>
    <div class="btn">
      <van-button type="primary" size="large" color="#ec6941" round class="btn1">登录</van-button>
      <van-button type="primary" size="large" color="gray" round class="btn1" plain>注册</van-button>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Button } from "vant";
import { Icon } from "vant";

Vue.use(Icon);
Vue.use(Button);
export default {
  methods: {
    toMy() {
      this.$router.replace("/my");
    }
  }
};
</script>

<style scoped>
.logo {
  width: 50px;
  height: 70px;
  position: absolute;
  left: 50%;
  top: 77px;
  margin-left: -25px;
}
.title {
  width: 90%;
  position: absolute;
  top: 30%;
  left: 5%;
}
.mode {
  text-align: center;
}
.btn {
  position: absolute;
  top: 60%;
  width: 80%;
  margin: 10%;
}
.btn1 {
  margin-top: 5%;
}
</style>